<template>
  <div id="container">
    <dv-scroll-board :config="config" class="chart" @mouseover="mouseoverHandler" @click="clickHandler" />
  </div>
</template>
<script lang="ts" setup>
import { onMounted, reactive } from "vue";
import { getMerchants } from '@/common/api';
let config = reactive({
  rowNum: 5,
  align: ['center', 'center', 'center'],
  headerBGC: '#0000003F',
  oddRowBGC: '#96D1FF5F',
  evenRowBGC: '#383E4C8F',
  header: ['车牌号', '当前状态', '风险项'],
  data: [
    ['京12A3G5', '运输中', '故障'],
    ['津22B4R7', '等待', '超载'],
    ['沪13C8W2', '卸货', '正常'],
    ['粤34A2D3', '加油', '过重'],
    ['鲁56B3M9', '休息', '超速'],
    ['晋67C9K1', '运输中', '高温'],
    ['冀78D4P8', '卸货', '过轻'],
    ['豫89A2Z3', '维修', '低温'],
    ['陕90B5Y4', '运输中', '违规'],
    ['鄂11C6T2', '等待', '故障'],
    ['甘23D9Q7', '加油', '正常'],
    ['苏45A2R1', '卸货', '超载'],
    ['浙67B4K8', '运输中', '过重'],
    ['皖12C8T9', '等待', '过轻'],
    ['闽34D5M3', '休息', '高温'],
    ['赣56A9W4', '运输中', '超速'],
    ['湘78B4Y6', '维修', '违规'],
    ['辽89C3Z2', '等待', '故障'],
    ['吉90D7P8', '卸货', '过轻'],
    ['黑11A3T5', '运输中', '低温'],
    ['琼23B9W2', '加油', '过重'],
    ['渝45C1R8', '卸货', '正常'],
    ['川67D4P3', '维修', '超速'],
    ['贵12A5Y4', '等待', '过轻'],
    ['云34B9K7', '加油', '违规'],
    ['青56C2Z1', '运输中', '故障'],
    ['藏78D1T5', '卸货', '高温'],
    ['蒙90A3M9', '等待', '过重'],
    ['宁11B4Y7', '运输中', '超载'],
    ['新23C9W1', '加油', '过轻'],
    ['京34D2K8', '卸货', '正常'],
    ['津45A3T9', '维修', '低温'],
    ['沪56B1Z7', '运输中', '过重'],
    ['粤67C5M2', '等待', '违规'],
    ['鲁78D3P6', '休息', '超速'],
    ['晋89A1R9', '运输中', '过轻'],
    ['冀90B4T2', '等待', '过重']
  ],

  rowsData: [],
})

onMounted(() => {

  // getMerchants().then((res) => {
  //   res.data.forEach((item) => {
  //     let t = [item.merchantName];
  //     config.rowsData.push(t);
  //     config.data = config.rowsData;
  //   });
  //   config = { ...config };
  // });
})

const mouseoverHandler = (e: any) => {
  console.log(e)
}

const clickHandler = (e: any) => {
  console.log(e)
}
</script>

<style scoped lang="scss">
#container {
  width: 100%;
  height: 100%;
  display: flex;
  overflow: hidden;
  align-items: center;
  justify-content: center;
}

.chart {
  width: 80%;
  height: 90%;
}

::v-deep .header-item {
  font-size: 14px;
  height: 40px !important;
  line-height: 40px !important;
  width: 33% !important;
}

::v-deep .dv-scroll-board .rows .row-item {
  font-size: 14px !important;
}
</style>